
/*icon*/
.icon {
    width: 2em; height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
/*common*/
body{
    font:14px/1.5 Arial;
    color:#333;
}

a:hover{
    color:#3f72af;;
}
/*layout*/
div.main{
    display: grid;
    grid:150px  auto / 1fr 300px 700px 1fr;
}

header{
    background-color: #3f72af;
    grid-column:1/span 4 ;
    grid-row: 1 ;

}
aside{
    background-color: #dbe2ef;
    grid-column:2/3 ;
    grid-row: 2 ;
}
main{
    background-color: #f9f7f7;
    grid-column:3/4 ;
    grid-row: 2 ;
}


/*header*/
header{
    text-align: center;
    display: flex;
    justify-content: center;
}
header figure{
    padding: 10px;
}
header .avatar{
    width:100px;
    height: 100px;
    border:3px solid #fff;
    border-radius: 50%;
    overflow: hidden;
}
header img{
    max-width: 130%;
    max-height: 130%;
}

header figcaption{
    font-weight: bold;
    margin-top:10px;
    color:#fff;
}
/*aside*/
section{
    display: grid;
    grid: auto auto /50px 100px 1fr;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
}
section>.iconfont{
    width: 2.7em;
    height: 2.7em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3f72af;
    border-radius: 50%;
    grid-row:1;
    grid-column: 1;

}
section>h2{
    grid-row:1;
    grid-column: 2;
}
section>hr{
    grid-row: 1;
    grid-column: 3;
    border: none;
    height: 3px;
    background: #3f72af;
}
section>.detail{
    grid-row: 2;
    grid-column:2/4;
    padding:15px 0;
}
section .icon-list {
    display: flex;
    align-items: center;
    padding: 5px;
}

section .icon-list>a{
    display: flex;
    align-items: center;
}

section>.detail .iconfont{
    margin-right: 60px;
}

section .skill-bar dt {
    margin-top: 16px;
}
section .skill-bar dd {
    height: 3px;
    background:  #f9f7f7;
}
section .skill-bar dd div {
    height: 100%;
    background: #3f72af;
    margin-top: 10px;

}
.html{
    width: 70%;
    animation: html 3s;
}
@keyframes html {
    0%{
        width: 0%;
    }
    100%{
        width: 70%;
    }
}
.js{
    width: 60%;
    animation: js 3s;
}
@keyframes js {
    0%{
        width: 0%;
    }
    100%{
        width: 60%;
    }
}
.vue{
    width: 60%;
    animation: vue 3s;
}
@keyframes vue {
    0%{
        width: 0%;
    }
    100%{
        width: 60%;
    }
}
.node{
    width: 30%;
    animation: node 3s;
}
@keyframes node {
    0%{
        width: 0%;
    }
    100%{
        width: 30%;
    }
}
.react{
    width: 10%;
    animation: react 3s;
}
@keyframes react {
    0%{
        width: 0%;
    }
    100%{
        width: 10%;
    }
}
.xiaochengxu{
    width: 10%;
    animation: xiaochengxu 3s;
}
@keyframes xiaochengxu {
    0%{
        width: 0%;
    }
    100%{
        width: 10%;
    }
}


/*main*/

section .timeline-panel {
    display: grid;
    grid: auto auto / 120px 1fr auto;
    align-items: center;
    margin-top: 16px;
}

section .timeline-panel .date {
    grid-row: 1;
    grid-column: 1;
}
section .timeline-panel > h3 {
    grid-row: 1;
    grid-column: 2;
}
section .timeline-panel .intro {
    grid-row: 1;
    grid-column: 3;
    color: #666;
}
section .timeline-panel .detail {
    grid-row: 2;
    grid-column: 2/span 2;
    margin-top: 10px;
}




/*print*/
.detail_print{
    grid-row: 2;
    grid-column:3;
}
.print{
    text-align: center;
}
.print>a{
    display: block;
    height:60px;
    background: #dce2ee;
    font-size: 20px;
    padding: 10px 0;


}
.print>a:hover{

    color:#f9f7f7;
    background-color: #3f72af;
    box-shadow:  12px 25px 38px 4px rgba(0,0,0,0.69);
    transition: all 1s;
}
.print>a:active{
    color:#f9f7f7;
    background-color: #dce2ee;;
    box-shadow:none;
    transition: all 1s;
}

/*responsive*/
/*@media(max-width:1024px){*/
/*    body{*/
/*        grid:150px auto /1fr 200px 600px 1fr;*/
/*    }*/
/*}*/

@media(max-width:768px){
    div.main{
        display: grid;
        grid:150px auto auto /1fr;
    }

    header{
        background-color: #3f72af;
        grid-column:1 ;
        grid-row: 1 ;
    }
    aside{
        background-color: #dbe2ef;
        grid-column:1 ;
        grid-row: 2 ;
    }
    main{
        background-color: #f9f7f7;
        grid-column:1 ;
        grid-row: 3 ;
    }
}

